<!DOCTYPE html>
    <head>
        <title>增加-删除列表</title>
        <meta charset="utf-8" >
        <link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
        <script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
        <script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
    </head>
    <body>
        <nav class="navbar navbar-default" role="navigation">
            <div class="navbar-header">Todo List</div>
        </nav>
        <div id="container">
            <form role="form">
                <div id="form-group">
                    <input type="checkbox" name="option" id="Item1" value="Item1"> 
                    <label>&nbsp;Todo item1</label>
                </div>
                <div id="form-group">
                    <input type="checkbox" name="option" id="Item2" value="Item2"> 
                    <label>&nbsp;Todo item2</label>
                </div>
                <div id="form-group">
                    <input type="checkbox" name="option" id="Item3" value="Item3"> 
                    <label>&nbsp;Todo item3</label>
                </div>
                <div id="form-group">
                    <input type="checkbox" name="option" id="Item4" value="Item4"> 
                    <label>&nbsp;Todo item4</label>
                </div>
                <div id="form-group">
                    <button type="button" name="add" id="add" onclick="add();"> + </button>
                    <input type="text" id="new" placeholder="Todo item4">
                </div>
            </form>
        </div>
        <script type="text/javascript">
            add=function(){
                var newitem=document.createElement("label");
                label.innerHTML=document.getElmentById('new').value;
            }
        </script>
    </body>
</html>